<template>
	<view class="view-table">
		<view class="list-head">
			<view class="view-tr">
				<view class="view-th" v-for="(item,index) in columns" :key="index"
					:style="[{background:thColor},colStyle(item)]">
					{{item.title}}
					<view class="sort" :class="sort" v-if="item.key=='indexC'" @click="handleSort">
						<view class="triangle up"></view>
						<view class="triangle down"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-body">
			<template v-for="(item,index) in list" :key="index">
				<view class="view-tr">
					<view class="view-td" v-for="(colItem,colIndex) in columns" :key="colIndex"
						:style="[colStyle(colItem)]" v-html="colContent(item,colItem,index)"
						@click="colItem.handle&&colItem.handle(item)"></view>
				</view>
			</template>

			<h3 v-if="isLoading">暂无数据</h3>
			<!-- <u-empty v-if="isLoading" mode="list" icon="info-circle" width='50px' height='50px'>
			</u-empty> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "tableList",
		props: {
			childrenColumns: {
				type: Object,
				default () {
					return {
						show: false,
						key: 'children',
						columns: []
					}
				},
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			columns: {
				type: Array,
				default () {
					return []
				}
			},

			// 表格颜色
			thColor: {
				type: String,
			},

		},
		data() {
			return {
				sort: "desc",
				isLoading: false
			}
		},
		computed: {
			hasChildren() {
				// console.log(this.childrenColumns);
				return this.childrenColumns && this.childrenColumns.show;
			}
		},
		methods: {
			handleSort() {
				if (this.sort == 'asc') {
					this.sort = 'desc';
				} else if (this.sort == 'desc') {
					this.sort = 'asc';
				}
				this.$emit('change', this.sort);
			},
			colStyle(item) {
				const res = {};
				if (item.$width) {
					res.width = item.$width;
				} else {
					res.flex = 1;
				}
				// 是否显示表格线
				if (item.line) {
					res['border-right'] = '1rpx solid #B5B9CD'
				} else {
					res['border-right'] = ''
				}

				return res
			},
			colContent(item, colItem, index) {
				if (colItem.type == 'index') {
					return index + 1;
				}
				if (colItem.format) {
					return colItem.format({
						item,
						index
					})
				} else {
					return item[colItem.key];
				}
			},

		}
	}
</script>

<style lang="scss">
	.view-table ::v-deep {
		// width: 96%;
		// margin: 0 2%;
		// width: 100%;
		// height: 200%;
		// margin: 0 2%;
		border-collapse: collapse;
		// border-left: 1rpx solid #B5B9CD;s
		// border-top: 1rpx solid #B5B9CD;
		box-sizing: border-box;
		overflow: auto;

		.view-tr {
			display: flex;
			background-color: #fff;
			// border: 1px green solid;

			.view-th,
			.view-td {
				flex: 0 0 auto;
				// border-right: 1rpx solid #B5B9CD;
				border-bottom: 1rpx solid #F1F1F1;
				font-size: 24rpx;
				padding: 18rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.view-th {
				line-height: 36rpx;
				color: #333;
				background: #EBEDF2;
				white-space: nowrap;
			}

			.view-td {
				line-height: 34rpx;
				color: #343434;
				// background: red;
			}

		}



	}

	.sort {
		width: 10rpx;
		display: flex;
		flex-direction: column;
		padding: 0 10rpx;
		cursor: pointer;

		.triangle {
			border: 10rpx solid transparent;
		}

		.up {
			border-bottom-color: #BBBBBB;
			margin-bottom: 2rpx;
		}

		.down {
			border-top-color: #BBBBBB;
		}
	}

	.asc {
		.up {
			border-bottom-color: #1D62BE;
		}
	}

	.desc {
		.down {
			border-top-color: #1D62BE;
		}
	}

	.list-body {
		h3 {
			text-align: center;
			margin-top: 50%;
			// position: relative;
			// top: 50%;
			// margin: 0 auto;
		}
	}
</style>